/* eslint-disable react/jsx-indent */
/* eslint-disable no-nested-ternary */
import React, { Component, Suspense } from "react";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { exportQAHistories } from "@/services/download";
import qs from "qs";
import { connect } from "dva";
import PageLoading from "@/components/PageLoading";
import { FormattedMessage, formatMessage } from "umi-plugin-react/locale";
import {
	Card, Row, Col, Form, Input, Button, message, Icon, Checkbox,
	Table, Tag, Select, Modal, Radio, Spin, Upload, Tabs, Tooltip,
} from "antd";
import Custom from "./custom.js";
import CustomNew from "./customNew";
import System from "./system";
import UserSession from "@/UserSession";
import { baseModelTabCountList } from '@/services/basiccapacity';
const { TabPane } = Tabs;
const FormItem = Form.Item;
const Search = Input.Search;
const InputGroup = Input.Group;
import styles from "./index.less";
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
import pen from "../../../assets/icons/bi.png";
import ljx from "../../../assets/icons/垃圾箱.png";

class CustomDictionary extends Component {
	state = {
		totalAHome: 0,
		totalBHome: 0,
		tabKey: 1,
		totalCHome: 0,
	};

	componentDidMount() {
		this.getbaseTabCount();
	}

	getbaseTabCount = async () => {
		let res = await baseModelTabCountList();
		this.setState({
			totalAHome: res.count,
			totalBHome: res.trainingCount,
			totalCHome: res.headquartersCount,
		})
	}

	totalAHome = (a) => {
		this.setState({ totalAHome: a });
	};

	totalBHome = (a) => {
		this.setState({ totalBHome: a });
	};

	totalCHome = (a) => {
		this.setState({ totalCHome: a });
	};

	callback = (key) => { };

	Tooltipzdy = () => {
		return (
			<div>
				{`${formatMessage({ id: 'customDictionary.entity.custom' })}(${this.state.totalAHome})`}
				<span style={{ marginLeft: 12, paddingTop: 3 }}>
					<Tooltip
						placement='top'
						title={formatMessage({ id: 'customDictionary.tooltip.custom' })}
						arrowPointAtCenter
					>
						<Icon style={{ fontSize: 14 }} type='info-circle' />
					</Tooltip>
				</span>
			</div>
		);
	};

	TooltipzdyTwo = () => {
		return (
			<div>
				{`${formatMessage({ id: 'customDictionary.entity.system' })}(${this.state.totalBHome})`}
				<span style={{ marginLeft: 12, paddingTop: 3 }}>
					<Tooltip
						placement='top'
						title={formatMessage({ id: 'customDictionary.tooltip.system' })}
						arrowPointAtCenter
					>
						<Icon style={{ fontSize: 14 }} type='info-circle' />
					</Tooltip>
				</span>
			</div>
		);
	};

	TooltipzdySys = () => {
		return (
			<div>
				{`${formatMessage({ id: 'customDictionary.entity.system' })}(${this.state.totalCHome})`}
				<span style={{ marginLeft: 12, paddingTop: 3 }}>
					<Tooltip 
						placement='top' 
						title={formatMessage({ id: 'customDictionary.tooltip.system' })} 
						arrowPointAtCenter
					>
						<Icon style={{ fontSize: 14 }} type='info-circle' />
					</Tooltip>
				</span>
			</div>
		);
	};

	// eslint-disable-next-line react/sort-comp
	render() {
		const { tabKey } = this.state;
		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card style={{ height: '100%' }} bordered={false}>
						<Tabs defaultActiveKey='1' onChange={(key) => this.setState({ tabKey: key })}>
							<TabPane forceRender={true} className='cardG' tab={this.Tooltipzdy()} key='1'>
								{tabKey == 1 ? (
									<CustomNew totalAHome={this.totalAHome} tabKey='1'></CustomNew>
								) : null}
							</TabPane>
							<TabPane forceRender={true} className='cardG' tab={this.TooltipzdyTwo()} key='3'>
								{tabKey == 3 ? (
									<System totalBHome={this.totalBHome}></System>
								) : null}
							</TabPane>
						</Tabs>
					</Card>
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	// 全局数据
	currentUser: user.currentUser,
}))(Form.create()(CustomDictionary));